<template>
  <div class="treeTop">
    <div v-loading="loading" class="treeContent">
      <el-form :model="form" label-width="80px">
        <el-form-item :label="$t('权限范围')">
          <el-select v-model="form.dataScope" size="small" @change="changeData">
            <el-option
              v-for="item in dataScopeOptions"
              :key="item.value"
              :label="$t(item.label)"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-tree
          ref="menu"
          :data="menuOptions"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span class="diyItem">
              <el-radio-group v-model="data.value" @change="changeRadioData($event, data)">
                <el-radio v-for="(item, index) in dataScopeOptions" :key="index" :label="item.value">{{ $t(item.label) }}</el-radio>
              </el-radio-group>
            </span>
          </span>
        </el-tree>
      </el-form>
    </div>
    <div class="dialogFooter">
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button type="primary" @click="submitForm">{{ $t("确定") }}</el-button>
    </div>
    <!-- ？自定义数据权限 -->
    <el-dialog :title="$t('数据权限')" :visible.sync="openDataScope" :close-on-click-modal="false" :lock-scroll="false" append-to-body>
      <el-tree
        ref="dept"
        :data="deptOptions"
        show-checkbox
        default-expand-all
        node-key="id"
        :empty-text="$t('加载中')"
        :props="defaultProps"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDept">{{ $t("确定") }}</el-button>
        <el-button @click="cancelDept">{{ $t("取消") }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { treeselectAndPermission } from '@/api/system/menu'
import { treeselect as deptTreeselect } from '@/api/system/dept'
export default {
  name: 'DataScope',
  components: {
	},
  data() {
    return {
      form: {
        dataScope: ''
      },
      deptOptions: [], // 部门列表
      openDataScope: false,
      loading: false,
      menuOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      deptId: '',
      // 数据范围选项
      dataScopeOptions: [
        {
          value: '0',
          label: '默认'
        },
        {
          value: '1',
          label: '全部'
        },
        {
          value: '2',
          label: '自定义'
        },
        {
          value: '6',
          label: '本公司全部数据'
        },
        {
          value: '3',
          label: '本部门'
        },
        {
          value: '4',
          label: '本部门及以下'
        },
        {
          value: '5',
          label: '仅本人'
        }
      ]

    }
  },
  mounted() {
    this.getMenu()
  },
  methods: {
    changeData(val) {
      this.getDeptTree()
      console.log(val)
      if (val === '2') {
        this.openDataScope = true
      }
    },
    changeRadioData(val, data) {
      this.getDeptTree()
      this.$set(data, 'deptKeys', [])
      if (val === '2') {
        this.openDataScope = true
        this.deptId = data.id
      }
      console.log(val, data)
    },
    getDeptTree() {
      deptTreeselect().then(response => {
        this.deptOptions = response.data
      })
    },
    /** 查询菜单树结构 */
    getMenu() {
      this.loading = true
      treeselectAndPermission({}).then(response => {
        this.menuOptions = this.filter(response.data.computer)
        this.loading = false
      })
    },
    filter(arr) {
      if (arr.length > 0) {
        for (let i = arr.length - 1; i >= 0; i--) {
          if (arr[i].type === 'permission') {
            arr.splice(i, 1)
          } else if (arr[i].children) {
            this.filter(arr[i].children)
          }
        }
      }
      return arr
    },
    cancelDept() {
      this.openDataScope = false
    },
    getAllCheckedKeys(val) {
      // 目前被选中的节点
      const checkedKeys = this.$refs[val].getHalfCheckedKeys()
      // 半选中的节点
      const halfCheckedKeys = this.$refs[val].getCheckedKeys()
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
      console.log(checkedKeys)
      return checkedKeys
    },
    submitDept() {
      console.log(this.deptId)
      const keys = this.getAllCheckedKeys('dept')
      const data = this.findData(this.menuOptions, this.deptId)
      this.$set(data, 'deptKeys', keys)
      this.openDataScope = false
    },
    cancel() {
      console.log(this)
    },
    submitForm() {
      const keys = this.getAllCheckedKeys('menu')
      keys.forEach(v => {
        const data = this.findData(this.menuOptions, v)
        console.log(data)
      })
    },
    findData(array, id, parent = false) {
      for (let i = 0; i < array.length; i++) {
        const item = array[i]
        if (item.id === id) {
          return item
        }
        if (item.children) {
          const child = this.findData(item.children, id)
          if (child) {
            if (parent) {
              return item
            } else {
              return child
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.treeTop{
  margin: -20px;
  height: calc(100% + 75px) !important;
  overflow: hidden;
  .treeContent  {
    height: calc(100% - 55px);
    overflow: auto;
    border-bottom: 1px solid #eee;
    padding: 25px;
    min-width: 810px;
  }
  .dialogFooter{
    float: right;
    margin: 10px;
  }

}
</style>
